<template>
  <div>
    <div class="nomore-class loadmore" v-if="visible">
      <div :class="isDot ? 'nomore-dot' : 'nomore'">
        <div :class="isDot ? 'dot-text' : 'text'">
          {{ isDot ? dotText : text }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "more-nomore",
};
</script>
<script lang="ts" setup>
import { ref } from "vue";
import { diyThemeDataType } from "@/types";
import { useConfig } from "@/store";

const dotText = ref<string>("●");

const props = withDefaults(
  defineProps<{
    visible?: boolean;
    bgcolor?: string;
    isDot?: boolean;
    text?: string;
  }>(),
  {
    visible: false,
    bgcolor: "#f9f9f9",
    isDot: false,
    text: "已加载全部",
  }
);

const diyTheme = ref<diyThemeDataType>(useConfig().getDiyTheme);
</script>
<style scoped>
	.loadmore {
	  width: 48%;
	  margin: 1.5em auto;
	  line-height: 1.5em;
	  font-size: var(--base-size-small);
	  text-align: center;
	}
	
	.nomore {
	  position: relative;
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  margin-top: 10rpx;
	  padding-bottom: 44rpx;
	}
	
	.nomore::before {
	  content: '';
	  position: absolute;
	  border-bottom: 1rpx solid #e5e5e5;
	  -webkit-transform: scaleY(0.5);
	  transform: scaleY(0.5);
	  width: 360rpx;
	  top: 18rpx;
	}
	
	.text {
	  position: absolute;
	  color: #999;
	  font-size: var(--base-size-small);
	  text-align: center;
	  padding: 0 18rpx;
	  height: 36rpx;
	  line-height: 36rpx;
	  z-index: 1;
	}
	
	.nomore-dot {
	  position: relative;
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  margin-top: 10rpx;
	  padding-bottom: 40rpx;
	}
	
	.nomore-dot::before {
	  content: '';
	  position: absolute;
	  border-bottom: 1rpx solid #e5e5e5;
	  -webkit-transform: scaleY(0.5);
	  transform: scaleY(0.5);
	  width: 360rpx;
	  top: 18rpx;
	}
	
	.dot-text {
	  position: absolute;
	  color: #e5e5e5;
	  font-size: var(--base-size-default);
	  text-align: center;
	  width: 50rpx;
	  height: 36rpx;
	  line-height: 36rpx;
	  transform: scale(0.8);
	  transform-origin: center center;
	  z-index: 1;
	}
</style>
